<!--
 * @Description:
 * @version: 签约申请审核
 * @Author: 潘骏杰
 * @Date: 2021-11-19 09:03:57
 * @LastEditors: 潘骏杰
 * @LastEditTime: 2022-03-29 13:36:26
-->
<template>
  <div>
    <HeaderNav />
    <div class="header">
      <h2>
        签约服务履约进度:
        <i>2/8</i>
      </h2>
    </div>
    <div class="back-white">
      <div class="mrbody" style="padding: 10px 0">
        <div class="cardbody">
          <div class="cont tab-ul">
            <div class="title">基础医疗服务包</div>
            <div class="packTime">2021/01/01 至 2021/12/31日</div>
          </div>

          <!-- 循环 -->
          <div class="blockpack re">
            <div class="left">
              <div class="leftLine" />
              <div class="packTitle">尿酸检查</div>
            </div>
            <div class="right">
              <div class="time">2021/03/23 12:44</div>

              <van-button round size="small" class="color">
                服务完成</van-button>
            </div>
          </div>
          <div class="blockpack re">
            <div class="left">
              <div class="leftLine" />
              <div class="packTitle">血糖测量</div>
            </div>
            <div class="right">
              <van-button round size="small">无需履约</van-button>
              <van-button round size="small" @click="honouragreement">去履约</van-button>
            </div>
          </div>
          <div class="blockpack re">
            <div class="left">
              <div class="leftLine" />
              <div class="packTitle">血压测量</div>
            </div>
            <div class="right">
              <van-button round size="small">无需履约</van-button>
              <van-button round size="small" @click="honouragreement">去履约</van-button>
            </div>
          </div>
          <div class="blockpack re">
            <div class="left">
              <div class="leftLine" />
              <div class="packTitle">血压测量</div>
            </div>
            <div class="right">
              <van-button round size="small">无需履约</van-button>
              <van-button round size="small" @click="honouragreement">去履约</van-button>
            </div>
          </div>
        </div>
        <div class="cardbody">
          <div class="cont tab-ul">
            <div class="title">基础医疗服务包</div>
            <div class="packTime">2021/01/01 至 2021/12/31日</div>
          </div>

          <!-- 循环 -->
          <div class="blockpack re">
            <div class="left">
              <div class="leftLine" />
              <div class="packTitle">尿酸检查</div>
            </div>
            <div class="right">
              <div class="time">2021/03/23 12:44</div>
              <van-button round size="small" class="color">服务完成</van-button>
            </div>
          </div>
          <div class="blockpack re">
            <div class="left">
              <div class="leftLine" />
              <div class="packTitle">血糖测量</div>
            </div>
            <div class="right">
              <van-button round size="small">无需履约</van-button>
              <van-button round size="small" @click="honouragreement">去履约</van-button>
            </div>
          </div>
          <div class="blockpack re">
            <div class="left">
              <div class="leftLine" />
              <div class="packTitle">血压测量</div>
            </div>
            <div class="right">
              <van-button round size="small">无需履约</van-button>
              <van-button round size="small" @click="honouragreement">去履约</van-button>
            </div>
          </div>
        </div>
      </div>
      <van-overlay v-if="!argeeBol" :show="show" @click="show = false">
        <div class="wrapper">
          <div class="block">
            <h2>履约确认</h2>
            <van-field
              v-model="xiangmu"
              label="服务项目"
              label-width="150"
              type="xiangmu"
            />
            <van-field
              v-model="duixiang"
              label="服务对象"
              label-width="150"
              type="duixiang"
            />
            <van-field
              v-model="beizhu"
              label="备注"
              label-width="150"
              type="beizhu"
            />
            <div class="btn" @click.stop>
              <span class="left" @click="cacel">取消</span>
              <span class="right" @click="submit">确定</span>
            </div>

          </div>
        </div>
      </van-overlay>
      <van-submit-bar
        v-else
        :price="198 * 100"
        button-text="提交"
        button-color="#4A90E2"
        text-align="left"
        safe-area-inset-bottom
        @submit="onSubmit"
      />
      <NoData v-if="false" />
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import HeaderNav from '@/components/headerNav/index'

export default {
  name: 'ReviewOfSigningApplication',
  // import引入的组件需要注入到对象中才能使用
  components: {
    HeaderNav
  },
  data() {
    // 这里存放数据
    return {
      loading: false,
      active: 0,
      showCardNumber: false,
      submiting: false,
      argeeBol: false,
      refuseshow: false,
      message: '',
      show: false,
      xiangmu: '血压检测',
      duixiang: '王丽',
      beizhu: '无'

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 加载布尔值成功 初始化数据接口判断在这
    await this.getData()
    this.today = new Date()
    this.loading = false
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // window.sessionStorage.clear();
    // console.log(this.$route.query.title);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周.期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    getData() {
      // 拉取数据接口
    },
    showD() {
      // 协议跳转
      console.log('---')
      this.$router.push({ path: '/agreement', query: { price: 198 }})
    },
    gopush(path) {
      this.$router.push({ path })
    },
    honouragreement() {
      this.show = true
    },
    // 取消
    cacel() {
      this.show = false
    },
    // 确定
    submit() {
      this.argeeBol = true
    },
    // 提交
    onSubmit() {
      console.log(this.message)
      if (this.message) {
        this.$toast.success('已提交')
      }
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
/deep/ .van-hairline--bottom::after {
  display: none !important;
}
/deep/ .van-submit-bar__price {
  color: #4a4a4a !important;
}
/deep/ .van-button {
  width: 70px;
  height: 25px;
  border: 2px solid #4a90e2;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: #4a90e2;
  margin-left: 10px;
}
/deep/ .van-field{
  margin-left: 30px;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #4A4A4A;
}
/deep/ .van-field-label{
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;

}
/deep/ .van-cell{
  width: 300px;
}
/deep/ .van-submit-bar{
  height: 50px;
  /deep/ .van-button{
    width: 150px;
   height: 40px;
  }
}
.tab-ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.title {
  font-size: 18px;
  margin-bottom: 5px;
  color: #4a4a4a;
  font-weight: 600;
}

.cardbody {
  padding: 10px;
  width: calc(100% - 30px);
}
.blockpack {
  clear: both;
  font-size: 18px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.leftLine {
  width: 4px;
  height: 25px;
  float: left;
  background: #4a90e2;
  border-radius: 5px;
  margin-right: 8px;
}
.packTitle {
  margin-top: 5px;
}
.packTime {
  color: #9b9b9b;
  font-size: 14px;
}
.left {
  line-height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right {
  display: flex;
  justify-content: center;
  align-items: center;
  .time {
    font-size: 12px;
    color: #9b9b9b;
  }
  .color {
    background-color: #eaeaea;
    color: #000;
    border-color: #eaeaea;
    font-weight: 400;
    font-family: PingFangSC-Regular, PingFang SC;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  h2 {
    font-size: 18px;
    margin-right: 20px;
  }
  i {
    font-size: 20px;
    color: #4a90e2;
    margin-left: 20px;
    font-style: normal;
  }
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 400px;
    height: 300px;
    background: #FFFFFF;
    border-radius: 13px;
    h2{
      font-size: 25px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      margin-left: 30px;
    }
  }
  .btn{
    display: flex;
    align-items: center;
    font-size: 20px;
    margin-top: 45px;
    .left{
      margin-left: 250px;
      color: #9B9B9B;
    }
    .right{
      margin-left: 30px;
      color: #4A90E2;
    }
  }
</style>
